<template>
	<div>
		<van-nav-bar title="购物车" left-text="返回" right-text="编辑" @click-left="onClickLeft" @click-right="onClickRight"
			left-arrow>
		</van-nav-bar>
		<!-- 内容 -->
		<van-checkbox-group v-model='result'>
			<ul v-for="(item, index) in getcartList" :key="index + ''" style="display: flex; border-bottom: 1px solid #ebe6fc; margin: 0px 20px">
				<li class="inputtp">
					<div>
						<van-checkbox v-model='item.checked' :name='item.id'  checked-color='#FD6801' @click='onchecked(index)'></van-checkbox>
					</div>
					<p class="align-center">
						<img :src="item.cover" style="width: 100%" />
					</p>
				</li>
				<li style="" class="inputys">
					<div>
						<div>
							<p class="title">{{ item.title }}</p>
							<p class="skusText">{{ item.skusText ||'火焰红 64G 标配' }}</p>
							<div style="display: flex;justify-content: flex-end; width: 100%;">
								<div style="display: flex;align-items: flex-start;justify-content: space-evenly;width: 20%;">
									<span class="moneyF">￥</span><span class="money">{{ item.pprice }}</span>
								</div>
								<div class="bcyszt">
									<button class="button" @click="del(index)">-</button>
									<span class="bitennum">{{ item.num }}</span>
									<button class="button1" @click="add(index)">+</button>
								</div>
							</div>

						</div>

					</div>
				</li>
			</ul>
		</van-checkbox-group>
		<div class="diBu" style="z-index: 999">
			<!-- 结算 -->
			<van-submit-bar :decimal-length='2' button-text="结算" @submit='clearing'>
				<van-checkbox v-model="checkAll" @click='checkedAll()' checked-color='#FD6801'>全选</van-checkbox>
				<p>
					合计:<span class="totalPrice"><span class="moneyF">￥</span><span class="money">{{gettersTotal}}</span></span>
				</p>
			</van-submit-bar>
		</div>
		<div style="height: 50px"></div>
	</div>
</template>
<script>
	
	import {mapMutations,mapState,mapGetters} from "vuex"
	import{placeOrder} from '../lib/liset.js'
	export default {
		data() {
			return {
				result: [],
				checkAll:false,
				counts: 0,
			};
		},
		watch: {
			result: function(newVal, oldVal) {
				console.log(newVal)
			}
		},
		methods: {
			...mapMutations(['mutationsAddCartinit','mutationsDelCart','mutationsAddCart','mutationsChangeCart','mutationsnocheckCart']),
			onClickLeft() {
				this.$router.push({
					name: "Home",
				});
			},
			setup() {
				const onClickLeft = () => Toast("返回");
				const onClickRight = () => Toast("按钮");
				return {
					onClickLeft,
					onClickRight,
				};
			},
			onClickRight() {
				console.log("1")
			},
			del(index){
				this.mutationsDelCart(index)
			},
			add(index){
				this.mutationsAddCart(index)
			},
			onchecked(index){
				this.mutationsChangeCart(index)
				let falg=this.getcartList.every((item,index)=>{
					return item.checked
				})
				this.checkAll=falg
			},
			checkedAll(){
				console.log(this.checkAll)
				this.mutationsnocheckCart(this.checkAll)
				
				if(this.checkAll){
					for(let i=0;i<this.getcartList.length;i++){
						console.log(this.getcartList[i].id)
						this.result.push(this.getcartList[i].id)
					}
				}else{
					this.result=[]
				}
			},
			clearing(){
				console.log("提交的订单");
				      let item=this.result.join(',');
				      console.log(item)
				      placeOrder({items:item,user_addresses_id:this.addres_Id}).then(res=>{
				        console.log(res);
				        this.$router.push({
				          name:'Indent'
				        })
				      }).catch(err=>{
				        console.log("失败")
				      })
			},
		},
		created() {
			this.mutationsAddCartinit()
			console.log(this.addres_Id)
		},
		mounted() {
			console.log(this.getcartList+"1")
		},
		computed: {
			...mapState({
				getcartList:state=>state.cart.cartList,
				addres_Id:state=>state.cart.addres_Id
				
			}),
			...mapGetters(['gettersTotal'])
		},
	};
</script>

<style scoped>
	.inputtp{
		width: 43%;
		display: flex;
		align-items: center;
	}
	.money{
		color:#FD6801;
		font-size: 1.6rem;
	}
	.moneyF{
		color:#FD6801;
		font-size: 1rem;
		justify-content: flex-end
	}
	.skusText{
		color: #747D85;
		font-size: 0.9rem;
		padding-bottom: 13px;
	}
	.title{
font-size: 1rem;
font-weight: 600;
flex-wrap: nowrap;
padding-top: 13px;
padding-bottom: 13px;
	}
	.align-center {
		width: 100%;
		padding: 0.6rem;
		border: 1px solid #ebe6fc;
		margin: 13px;
	}

	.inputys {
		width: 50%;
		display: flex;
		align-items: center;
	}


	.bcyszt {
		border: 1px solid #ccc;
		width: 100px;
		display: flex;
		height: 30px;
		margin-left: 10%;
	}

	.button,
	.button1,
	.bitennum {
		width: 70%;
		height: 30px;
		border: none;
	}

	.bitennum {
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
